import 'package:flutter/material.dart';
import 'package:flutterdemo/0demo/common/common.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AppbarTabBarPage extends StatefulWidget {
  @override
  _AppbarTabBarPageState createState() => _AppbarTabBarPageState();
}

class _AppbarTabBarPageState extends State<AppbarTabBarPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void deactivate() {
    print("deactivate");
    super.deactivate();
  }

  @override
  void initState() {
    _tabController = TabController(length: tabs.length, vsync: this);
    _tabController.addListener(() {
      // 这里有坑，会回调两次，点击tab会回调两次，需要按需求过滤，第一次回调是下标瞬间改变，第二次回调是动画结束
      if (_tabController.indexIsChanging) {
        print("第一次回调index == " + _tabController.index.toString());
      }
      // 这里推荐使用这种，等动画结束下标改变，因为flutter默认等动画结束才会build新页面，否则容易导致下标和页面不一致。
      // 其实最稳妥的办法就是不用这个监听，build页面的时候将相应下标作为构造参数传过去。
      if (_tabController.index == _tabController.animation.value) {
        print("第二次回调index == " + _tabController.index.toString());
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: false);
    setStatusBarBlack(); // 设置沉浸式状态栏并修改状态栏颜色，对应scaffold brightness
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(300.h),
        child: AppBar(
          // title高度无法改变，用Center包起来，动态改变bottom内容即可
          title: Center(
            child: Container(
              width: double.infinity,
              child: Text("custom title"),
              color: Colors.redAccent,
            ),
          ),
//          automaticallyImplyLeading: false,
//          titleSpacing: 0,
//        这样一个widget作为title就可以自定义title了，用leading actions 点击水波纹是个谜，贼鸡儿大
          brightness: Brightness.light,
          backgroundColor: Colors.blue,
          titleSpacing: 0,
          centerTitle: false,
          automaticallyImplyLeading: false,
          elevation: 10.h,
          bottom: TabBar(
            isScrollable: false,
            controller: _tabController,
            //tabs 的长度超出屏幕宽度后，TabBar，是否可滚动
            //设置为false tab 将平分宽度，为true tab 将会自适应宽度
//                  isScrollable: false,
            //设置tab文字得类型
            labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            //设置tab选中得颜色
            labelColor: Colors.white,
            //设置tab未选中得颜色
            unselectedLabelColor: Colors.white54,
            //设置自定义tab的指示器，CustomUnderlineTabIndicator
            //若不需要自定义，可直接通过
            //indicatorColor 设置指示器颜色
            indicatorColor: Colors.redAccent,
            indicatorPadding: EdgeInsets.only(left: 100.w, right: 100.w),
            // 指示器厚度，0.001基本上看不见，不能为0，或者设置color为transparent
            indicatorWeight: 10.h,
            // indicatorSize  设置指示器大小计算方式
            // 指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
            indicatorSize: TabBarIndicatorSize.tab,
            tabs: tabs.map((IconTab choice) {
              return new Tab(
//                    text: choice.title,
//                    icon: new Icon(choice.icon),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(choice.title),
                    new Icon(choice.icon),
                  ],
                ),
              );
            }).toList(),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabs.map((IconTab choice) {
          return new Padding(
            padding: const EdgeInsets.all(16.0),
            child: new ChoiceCard(choice: choice),
          );
        }).toList(),
      ),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

class ChoiceCard extends StatefulWidget {
  final IconTab choice;

  const ChoiceCard({Key key, this.choice}) : super(key: key);

  @override
  _ChoiceCard createState() => _ChoiceCard();
}

class _ChoiceCard extends State<ChoiceCard> with AutomaticKeepAliveClientMixin {
  // 保证widget不被销毁
  bool _isClick = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final TextStyle textStyle = Theme.of(context).textTheme.bodyText1;
    return new Card(
      color: Colors.white,
      child: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            InkWell(
                onTap: () {
                  setState(() {
                    _isClick = true;
                  });
                },
                child: new Icon(widget.choice.icon, size: 128.0, color: textStyle.color)),
            new Text(_getText(), style: textStyle),
          ],
        ),
      ),
    );
  }

  String _getText() {
    if (_isClick) {
      return "aaa";
    } else {
      return widget.choice.title;
    }
  }

  @override
  bool get wantKeepAlive => true;
}
